<template>
    <block v-if="scene == 1154">
    	<pyq-open-chunk></pyq-open-chunk>
    </block>
    <block v-else>
        <view class="detailPage u-skeleton">
            <view class="content bg-fff boxShadow">
                <view class="topContent">
                    <view class="leftContent">
                        <view class="titleBox flex">
                            <view class="titRow flex">
                                <text class="title txtHidden font16 u-skeleton-fillet">{{title}}</text>
                                <text class="status font10 left-5 col-theme u-skeleton-fillet">{{sell_type_display}}</text>
                            </view>

                            <view class="font12 flex col-theme" @click="toHouseDetail">
                                项目详情
                                <u-icon name="arrow-right" color="#FAA000" size="12"></u-icon>
                            </view>
                        </view>
                        <view class="dateTimeBox top-10 flex font12">
                            <block v-if="currDate === 'before'">
                                认购开始：{{startDate?startDate.substring(0, 10):'暂无'}}
                                <view class="left-5">
                                    距开始还有
                                    <block v-if="transStartDate.day">
                                        <text class="daysNum text-center col-fff bg-error fontBold left-3 right-3">{{transStartDate.day}}</text>天
                                    </block>
                                    <block v-if="transStartDate.hour">
                                        <text class="daysNum text-center col-fff bg-error fontBold left-3 right-3">{{transStartDate.hour}}</text>小时
                                    </block>
                                    <block v-if="transStartDate.minu">
                                        <text class="daysNum text-center col-fff bg-error fontBold left-3 right-3">{{transStartDate.minu}}</text>分
                                    </block>
                                </view>
                            </block>
                            <block v-if="currDate === 'ongoing'">
                                认购开始：{{startDate?startDate.substring(0, 10):'暂无'}}
                                <view class="left-5">
                                    距结束还有
                                    <block v-if="transEndDate.day">
                                        <text class="daysNum text-center col-fff bg-error fontBold left-3 right-3">{{transEndDate.day}}</text>天
                                    </block>
                                    <block v-if="transEndDate.hour">
                                        <text class="daysNum text-center col-fff bg-error fontBold left-3 right-3">{{transEndDate.hour}}</text>小时
                                    </block>
                                    <block v-if="transEndDate.minu">
                                        <text class="daysNum text-center col-fff bg-error fontBold left-3 right-3">{{transEndDate.minu}}</text>分
                                    </block>
                                </view>
                            </block>
                            <block v-if="currDate === 'end'">
                                认购开始：{{startDate?startDate.substring(0, 10):'暂无'}}
                                <view class="left-5">
                                    认购已结束
                                </view>
                            </block>
                            <block v-if="currDate === ''">
                                认购时间：暂无
                            </block>
                        </view>
                    </view>
                </view>
                
                <view class="dengjiTable bg-yellow-opacity font13 u-skeleton-fillet top-15">
                    <view class="countRow flex">
                        <view class="itemWrap text-center">
                            <view class="itemTitle bg-fff">总认购数</view>
                            <view class="itemContent bg-fff flex">
                                <block v-if="panData.buy_group">
                                    <view class="itemValue">
                                        <text class="fontBold font18">{{ formatNumber(panData.buy_group) }}</text>
                                    </view>
                                </block>
                                <block v-else-if="panData.guess_buy_group">
                                    <view class="itemValue">
                                        <text class="fontBold font18">{{ formatNumber(panData.guess_buy_group) }}</text>
                                    </view>
                                </block>
                                <block v-else-if="panData.guess_reg_group || panData.pay_ratio">
                                    <view class="itemValue">
                                        <text class="font9">预约认购</text>
                                        <text class="fontBold">{{ formatNumber(panData.guess_reg_group) }}</text>
                                    </view>
                                    <view class="itemValue">
                                        <text class="font9">实际认购</text>
                                        <text class="fontBold">{{ formatNumber(panData.pay_ratio) }}</text>
                                    </view>
                                </block>
                                <block v-else>
                                    <view class="itemValue">
                                        <text class="fontBold font18">--</text>
                                    </view>
                                </block>
                            </view>
                        </view>

                        <view class="itemWrap text-center">
                            <view class="itemTitle bg-fff">认购率</view>
                            <view class="itemContent bg-fff flex">
                                <block v-if="panData.buy_ratio">
                                    <view class="itemValue">
                                        <text class="fontBold font18">{{ panData.buy_ratio ? panData.buy_ratio + '%' : '--' }}</text>
                                    </view>
                                </block>
                                <block v-else-if="panData.guess_buy_ratio">
                                    <view class="itemValue">
                                        <text class="fontBold font18">{{ panData.guess_buy_ratio ? panData.guess_buy_ratio + '%' : '--' }}</text>
                                    </view>
                                </block>

                                <block v-else-if="panData.guess_reg_ratio || panData.guess_pay_ratio">
                                    <view class="itemValue">
                                        <text class="fontBold">{{ panData.guess_reg_ratio ? panData.guess_reg_ratio + '%' : '--' }}</text>
                                    </view>

                                    <view class="itemValue">
                                        <text class="fontBold">{{ panData.guess_pay_ratio ? panData.guess_pay_ratio + '%' : '--' }}</text>
                                    </view>
                                </block>

                                <block v-else>
                                    <view class="itemValue">
                                        <text class="fontBold font18">--</text>
                                    </view>
                                </block>
                            </view>
                        </view>

                        <view class="itemWrap text-center">
                            <view class="itemTitle bg-fff">本期套数</view>
                            <view class="itemContent bg-fff flex">
                                <view class="itemValue">
                                    <text class="fontBold font18">{{ panData.house_count || '--' }}</text>
                                </view>
                            </view>
                        </view>

                        <view class="itemWrap text-center">
                            <view class="itemTitle bg-fff">{{ panData.points_state === '' ? '预估分数':'本期积分' }}</view>
                            <view class="itemContent bg-fff flex">
                                <view class="itemValue">
                                    <text class="fontBold font18">{{panData.points_state === ''?panData.guess_points:panData.points_state}}</text>
                                </view>
                            </view>
                        </view>
                    </view>

                    <view class="xishuRow bg-fff top-8 font12">
                        <text>社保系数：{{ panData.bao_ratio || '--' }}</text>
                        <text class="left-5">入围比：{{ panData.ruwei_ratio || '--' }}</text>
                    </view>
                </view>

                <view class="renGouLineGroup bg-fff" v-if="renGouProgress > 90">
                    <view class="text-left font12 fontBold">{{ chuFaTxt }}</view>
                    <block v-if="jiFenMax === 130">
                        <view class="XSJFLine lineTxtWrap flex" :class="{'activeWrap':renGouProgress >= 130 && renGouProgress >= jiFenMax}" :style="{left: `calc(${(135/lineMaxVal)*100}% - ${lineWidth}px + ${speedWidth}px)`}">
                            <text class="tipWrap font10 border-grey text-center bg-fff">限售&积分线</text>
                            <view class="dashedLine lineDefHeight"></view>
                            <view class="circleWrap bg-fff"></view>
                        </view>
                    </block>
                    <block v-else>
                        <view class="xianShLine lineTxtWrap flex" :class="{'activeWrap':renGouProgress >= 130}" :style="{left: `calc(${(135/lineMaxVal)*100}% - ${lineWidth/2}px + ${speedWidth}px)`}">
                            <text class="tipWrap font10 border-grey text-center bg-fff">限售130%</text>
                            <view class="dashedLine lineDefHeight"></view>
                            <view class="circleWrap bg-fff"></view>
                        </view>
                        
                        <view class="jifenLine lineTxtWrap flex" :class="{'activeWrap':renGouProgress >= jiFenMax}" :style="{left: `calc(${(jiFenMax/lineMaxVal)*100}% - ${lineWidth/2}px + ${speedWidth}px)`}" v-if="jiFenMax && lineMaxVal">
                            <text class="tipWrap font10 border-grey text-center bg-fff">积分{{ jiFenMax }}%</text>
                            <view class="dashedLine" :class="(jiFenMax - 130) > 60 ? 'lineDefHeight':'lineActHeight'"></view>
                            <view class="circleWrap bg-fff"></view>
                        </view>
                    </block>

                    <view class="lineProgWrap bg-e7 top-8">
                        <view class="progActi" :style="{width: `calc(${(lineMaxVal ? (renGouProgress / lineMaxVal)*100 : 0)}% + ${speedWidth}px)`}"></view>
                    </view>
                </view>
            </view>
        </view>
    </block>
</template>

<script>
    import { mapState, mapActions } from 'pinia';
    import { useUserInfoStore, useConfigStore } from '@/store/index';
	import { rengouDetailAPI } from '@/common/api/houses';
	import { isDuringDate, surplusDays, checkLogin, isBoolean } from '@/common/common';
    // import { dispatchClient } from '@/common/api-adviser';
	
	export default {
		data() {
			return {
				productId: null,
                kaiId: '',
				sell_type_display: '',
				title: '',
                currDate: '',
				startDate: '',
                endDate: '',
                transStartDate: '',
                transEndDate: '',
                panData: {},
                loading: true,
                title: '',
                share: false,
                start_time: 0,
                updateTime: 0,
                subscribe: false
			};
		},
        computed:{
        	...mapState(useConfigStore, ['scene', 'puid']),
            ...mapState(useUserInfoStore, ['userInfo']),
            //触发积分轴线的计算比例
            lineMaxVal: function() {
                let renGouRatio = parseFloat(this.panData?.buy_ratio || this.panData?.guess_buy_ratio) || 0;
                const jiFenNum = parseFloat(this.panData?.ruwei_ratio) * 100 || 0;
                const MaxNum = Math.max(130, renGouRatio, jiFenNum);
                if(!MaxNum) return 0;
                return MaxNum + MaxNum*.2;
            },

            //积分线
            jiFenMax: function() {
                let ratio = parseFloat(this.panData?.ruwei_ratio);
                if(!ratio) return 0;
                return ratio * 100
            },

            //认购率,认购进度条宽度
            renGouProgress: function() {
                let ratio = parseFloat(this.panData?.buy_ratio || this.panData?.guess_buy_ratio);
                if(!ratio) return 0;
                return ratio
            },

            //积分线宽度
            lineWidth: function() {
                return uni.upx2px(120)
            },

            //预留宽度避免遮挡文字
            speedWidth: function() {
                return uni.upx2px(40)
            },

            //触发/未触发限售和积分文本
            chuFaTxt: function() {
                let ratio = parseFloat(this.panData?.buy_ratio || this.panData?.guess_buy_ratio);
                if(!ratio) return '';
                let exceedXianShou = ratio >= 130;
                let exceedJiFen = ratio >= this.jiFenMax;
                if(exceedXianShou && exceedJiFen) {
                    return '已触发积分&限售'
                }
                if(exceedJiFen) {
                    return '已触发积分'
                }
                if(exceedXianShou) {
                    return '已触发限售'
                }
                return '未触发限售'
            }
        },
        onShareAppMessage(res) {
            return {
                title: `${this.title}认购监测，点击了解详情`,
                path: `/pages/products/rengou-jiance/detail?productId=${this.productId}&kaiId=${this.kaiId}&puid=${this.userInfo.id}&title=${this.title}&share=true&prepage=上海认购监测-${this.productId}-${this.title}`,
            	//#ifdef MP-TOUTIAO
            	templateId: '3e9tvurff9vob6ot7u',
            	//#endif
            }
        },
        //#ifdef MP-WEIXIN
        onShareTimeline() {
            return {
                title: `${this.title}认购监测，点击了解详情`,
                query: `productId=${this.productId}&kaiId=${this.kaiId}&puid=${this.userInfo.id}&title=${this.title}&share=true&prepage=上海认购监测-${this.productId}-${this.title}`
            }
        },
        //#endif
		onLoad(options) {
            let that = this;
            
            //朋友圈进入小程序快照场景
            if(this.scene == 1154) return;
            
            let { puid='', productId='', kaiId='', title='', share=false } = options;
            this.productId = productId&&productId!=='undefined'?productId:'';
            this.kaiId = kaiId&&kaiId!=='undefined'?kaiId:'';
            this.title = title&&title!=='undefined'?title:'';
            this.share = isBoolean(share);
            if(puid&&puid!=='undefined') {
                this.setPuid(puid)
            }
            
            if(this.productId) {
                uni.$check_and_login(function (){
                    //绑定客户
                    // dispatchClient({
                    //     share: that.share,
                    //     puid: puid,
                    //     pid: that.productId
                    // });
                    that.init()
                });
            }
		},

		methods: {
            ...mapActions(useConfigStore, ['setPuid']),
			 //请求数据
			init(){
				rengouDetailAPI(this.kaiId).then(res => {
					if (res.status == 0) {
						let { sell_type_display, pan, title, start_date, end_date, qrcode_url, subscribe } = res.detail;
						this.sell_type_display = sell_type_display;
						this.title = title;
						this.startDate = pan.buy_start_time;
                        this.endDate = pan.buy_end_time;
                        this.transStartDate = pan.buy_start_time?surplusDays(pan.buy_start_time):'';
                        this.transEndDate = pan.buy_end_time?surplusDays(pan.buy_end_time):'';
                        if(pan.buy_start_time && pan.buy_end_time) {
                            this.currDate = isDuringDate(pan.buy_start_time, pan.buy_end_time);
                        }
                        this.panData = pan;
                        this.subscribe = subscribe;
                        this.updateTime = pan.update_time?pan.update_time.substring(0, 16):'';
                        uni.setNavigationBarTitle({
                            title: `${title}认购监测`
                        });
                        this.loading = false;
					}else if(res.status == 1) {
                        uni.$u.toast('认购信息已下架');
                        setTimeout(function() {
                            uni.navigateBack({
                                delta: 1
                            })
                        }, 2000)
                    }else {
						uni.$u.toast(res.detail);
					}
				}).catch(err => {
				})
			},

            //数据模糊
            formatNumber(num) {
                return num > 0 ? (num>=10?Math.floor(num/10)*10+'+' : '<10') : '--'
            },
			
			//楼盘详情
			toHouseDetail() {
				uni.navigateTo({
					url: `/pages/product/detail/index?productId=${this.productId}&puid=${this.puid}&title=${this.title}`
				})
			}
		}
	};
</script>

<style lang="scss">
    .border-right-theme {
        border-right: 2rpx solid $theme-color;
    }
    .border-top-theme {
        border-top: 2rpx solid $theme-color;
    }
    .border-right-white {
        border-right: 2rpx solid #FFFFFF;
    }
	.detailPage{
		min-height: 100vh;
        line-height: 1;
        background: linear-gradient(0deg, #FFFFFF, 80%, $theme-color, $theme-color);
		.content{
            margin: 0 28rpx;
            padding: 40rpx 28rpx;
            border-radius: 40rpx;
            .topContent{
                .leftContent{
                    .titleBox{
                        justify-content: space-between;
                        .titRow{
                            width: 75%;
                            justify-content: flex-start;
                        }
                        .status{
                        	padding: 6rpx 12rpx;
                        	border: 1rpx solid $theme-color;
                        }
                        .title{
                            max-width: 60%;
                        }
                    }
                    .dateTimeBox{
                        justify-content: flex-start;
                        .daysNum{
                            width: 40rpx;
                            height: 40rpx;
                            display: inline-block;
                            line-height: 40rpx;
                            border-radius: 50%;
                        }
                    }
                }
            }
		}
        .dengjiTable{
            padding: 16rpx;
            .countRow{
                align-items: stretch;
                flex-wrap: wrap;
                justify-content: space-between;
                .itemWrap{
                    width: calc(25% - 6rpx);
                    margin: 3rpx;
                    .itemTitle{
                        padding: 15rpx 0;
                    }
                    .itemContent{
                        margin-top: 3rpx;
                        min-height: 120rpx;
                        flex-direction: column;
                        .itemValue{
                            width: 100%;
                            padding: 13rpx 0;
                            &:nth-child(2){
                                border-top: 3rpx solid rgba(255, 172, 40, 0.15);
                            }
                        }
                    }
                }
            }
            .xishuRow{
                padding: 25rpx 20rpx;
            }
        }
        .renGouLineGroup{
            padding: 80rpx 0 20rpx 0;
            margin: 0 20rpx;
            border-radius: 10rpx;
            position: relative;
            .XSJFLine{
                min-width: 140rpx;
            }
            .xianShLine,.jifenLine{
                min-width: 120rpx;
            }
            .lineTxtWrap{
                z-index: 5;
                bottom: 11rpx;
                position: absolute;
                flex-direction: column;
                .tipWrap{
                    width: 100%;
                    padding: 6rpx 0;
                    color: #8A8A8A;
                    border-radius: 10rpx;
                }
                .dashedLine{
                    border-right: 2rpx solid #E7E7E7;
                }
                .lineDefHeight{
                    height: 10rpx;
                }
                .lineActHeight{
                    height: 50rpx;
                }
                .circleWrap{
                    width: 30rpx;
                    height: 30rpx;
                    border-radius: 50%;
                    border: 6rpx solid #E7E7E7;
                }
            }
            .activeWrap{
                .tipWrap{
                    color: #FAA000;
                }
                .circleWrap{
                    border: 6rpx solid #FAA000;
                }
            }
            .lineProgWrap{
                height: 8rpx;
                .progActi{
                    max-width: 100%;
                    height: 8rpx;
                    background-color: $theme-color;
                }
            }
        }
	}
</style>
